<template>
  <div class="home-container">
    <el-container class="main-container">
      <el-header class="main-header">
        <div class="header-content">
          <div class="logo-section">
            <i class="el-icon-monitor logo-icon"></i>
            <h1 class="app-title">服务器迁移管理系统</h1>
          </div>
          <div class="header-actions">
            <div class="notification-area">
              <el-badge :value="unreadNotifications" :max="99" class="notification-badge">
                <el-button type="text" class="notification-button" @click="showNotifications">
                  <i class="el-icon-bell"></i>
                </el-button>
              </el-badge>
            </div>
            <div class="user-actions">
              <el-dropdown @command="handleUserCommand">
                <span class="user-dropdown">
                  <el-avatar :size="32" class="user-avatar">
                    <i class="el-icon-user"></i>
                  </el-avatar>
                  <span class="username">{{ username }}</span>
                  <i class="el-icon-arrow-down"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="profile">
                    <i class="el-icon-user"></i>个人资料
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <i class="el-icon-setting"></i>系统设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <i class="el-icon-switch-button"></i>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      
      <el-container class="content-container">
        <el-aside width="220px" class="main-aside">
          <div class="aside-header">
            <h2 class="menu-title">导航菜单</h2>
          </div>
          <el-menu
            :default-active="activeMenu"
            class="main-menu"
            @select="handleMenuSelect"
            background-color="#2c3e50"
            text-color="#ecf0f1"
            active-text-color="#3498db"
            unique-opened
            router
          >
            <el-menu-item index="/">
              <i class="el-icon-house"></i>
              <span slot="title">仪表板</span>
            </el-menu-item>
            <el-menu-item index="/servers">
              <i class="el-icon-monitor"></i>
              <span slot="title">服务器管理</span>
            </el-menu-item>
            <el-menu-item index="/migrations">
              <i class="el-icon-position"></i>
              <span slot="title">迁移任务</span>
            </el-menu-item>
            <el-menu-item index="/backups">
              <i class="el-icon-box"></i>
              <span slot="title">备份任务</span>
            </el-menu-item>
            <el-menu-item index="/logs">
              <i class="el-icon-document"></i>
              <span slot="title">操作日志</span>
            </el-menu-item>
            <el-menu-item index="/reports">
              <i class="el-icon-data-analysis"></i>
              <span slot="title">统计报表</span>
            </el-menu-item>
            <el-menu-item index="/user-stats">
              <i class="el-icon-user"></i>
              <span slot="title">用户统计</span>
            </el-menu-item>
            <el-menu-item index="/users">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <el-main class="main-content">
          <div class="content-wrapper">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      activeMenu: this.$route.path,
      unreadNotifications: 3
    }
  },
  computed: {
    ...mapGetters('auth', ['username'])
  },
  watch: {
    $route(to) {
      this.activeMenu = to.path
    }
  },
  methods: {
    ...mapActions('auth', ['logout']),
    handleMenuSelect(index) {
      // 只有当目标路由与当前路由不同时才进行导航
      if (index !== this.$route.path) {
        this.$router.push(index).catch(err => {
          // 忽略导航取消错误
          if (err.name !== 'NavigationDuplicated' && !err.message.includes('Navigation cancelled')) {
            console.error(err)
          }
        })
      }
    },
    handleUserCommand(command) {
      switch (command) {
        case 'logout':
          this.handleLogout();
          break;
        case 'profile':
          this.$message.info('个人资料功能开发中');
          break;
        case 'settings':
          this.$message.info('系统设置功能开发中');
          break;
      }
    },
    async handleLogout() {
      await this.logout()
      this.$router.push('/login')
      this.$message.success('已安全退出')
    },
    showNotifications() {
      this.$message.info('通知功能开发中')
    }
  }
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  overflow: hidden;
}

.main-container {
  height: 100%;
}

.main-header {
  background: linear-gradient(135deg, #2c3e50 0%, #1a2530 100%);
  color: #fff;
  padding: 0;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
  z-index: 100;
  position: relative;
}

.main-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.5), transparent);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 25px;
}

.logo-section {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 28px;
  margin-right: 15px;
  color: #3498db;
}

.app-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: white;
  letter-spacing: 1px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.notification-area {
  position: relative;
}

.notification-badge ::v-deep .el-badge__content {
  background-color: #e74c3c;
  border: none;
}

.notification-button {
  color: #ecf0f1;
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.notification-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #3498db;
}

.user-actions {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: white;
  padding: 8px 15px;
  border-radius: 25px;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.1);
}

.user-dropdown:hover {
  background-color: rgba(52, 152, 219, 0.3);
}

.user-avatar {
  background-color: #3498db;
  margin-right: 10px;
}

.username {
  margin: 0 10px;
  font-weight: 500;
  font-size: 15px;
}

.content-container {
  height: calc(100% - 70px);
}

.main-aside {
  background-color: #2c3e50;
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.2);
  z-index: 99;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.aside-header {
  padding: 20px 15px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-title {
  color: #ecf0f1;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

.main-menu {
  border: none;
  height: 100%;
  padding: 10px 0;
}

.main-menu ::v-deep .el-menu-item {
  height: 55px;
  line-height: 55px;
  padding-left: 25px !important;
  margin: 5px 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.main-menu ::v-deep .el-menu-item:hover {
  background-color: #34495e !important;
  color: #3498db !important;
}

.main-menu ::v-deep .el-menu-item.is-active {
  background-color: #34495e !important;
  color: #3498db !important;
  border-left: 4px solid #3498db;
}

.main-menu ::v-deep .el-menu-item i {
  margin-right: 12px;
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.main-content {
  background-color: #f5f7fa;
  padding: 25px;
  overflow: auto;
}

.content-wrapper {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 25px;
  min-height: calc(100vh - 160px);
  transition: all 0.3s ease;
}

.content-wrapper:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 15px;
  }
  
  .app-title {
    font-size: 18px;
  }
  
  .username {
    display: none;
  }
  
  .notification-area {
    margin-right: 10px;
  }
  
  .main-content {
    padding: 15px;
  }
  
  .content-wrapper {
    padding: 15px;
  }
}
</style>